<template>
  <aside class="leftmenu">
    <ul>
      <router-link :to="item.link" v-for="(item, index) in list" :key="index">
        <li
          @click="handleClick(index)"
          :class="[currentIndex == index ? 'action' : '']"
        >
          {{ item.name }}
        </li>
      </router-link>
    </ul>
  </aside>
</template>
<script>
export default {
  name: "LeftMenu",
  data() {
    return {
      list: [
        { name: "button按钮", link: "/button" },
        { name: "input输入框", link: "/input" },
        { name: "switch开关", link: "/switch" },
        { name: "radio单选框", link: "/radio" },
        { name: "checkbox复选框", link: "/checkbox" },
        { name: "alert警告", link: "/alert" },
        { name: "modal对话框", link: "/model" },
        { name: "toast消息提示", link: "/toast" },
        { name: "notice通知提醒", link: "/notice" },
        { name: "tooltip文字提示", link: "/tooltip" },
        { name: "poptip气泡提示", link: "/poptip" },
        { name: "progress进度条", link: "/progress" },
        { name: "circle进度环", link: "/circle" },
        { name: "swiper轮播图", link: "/swiper" },
        { name: "tag标签", link: "/tag" },
        { name: "avatar头像", link: "/avatar" },
        { name: "menu导航栏", link: "/menu" },
        { name: "loading加载", link: "/loading" },
        { name: "scroll滚动", link: "/scroll" },
        { name: "list列表", link: "/list" },
        { name: "table表格", link: "/table" },
      ],
      currentIndex: 0,
    };
  },
  methods: {
    handleClick(index) {
      this.currentIndex = index;
    },
  },
};
</script>
<style scoped>
.leftmenu {
  width: 280px;
  height: calc(100vh - 59px);
  float: left;
  border-right: 1px solid var(--border);
  font-size: 17px;
  cursor: pointer;
  font-weight: bolder;
  overflow: auto;
}
.leftmenu ul {
  list-style-type: none;
}
.leftmenu ul li {
  height: 40px;
  line-height: 40px;
  padding: 0px 10px;
}
a {
  text-decoration: none;
  color: var(--text-bold);
}
.action {
  color: #4abc88;
}
</style>